<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- p标签中显示名字 -->
    <p id="p1"></p>
    <script>
        let p = document.querySelector('#p1');

        // 原始数据
        let obj1 = {age: 8, name: 'Tom', money: 999};
        let age = obj1.age;
        let name2 = obj1.name
        let proxy1 = new Proxy(obj1, {
            // 拦截获取数据---代替对象的.运算符，所以叫代理
            get(obj1, key, receiver) {
                console.log('你访问了'+key+'属性');
                console.log(receiver);
                // 新的需求 ：访问年龄时返回一个大于10的值
                if(key === 'age') {
                    if(obj1[key] >= 10) {
                        return obj1[key]
                    }else {
                        return 10
                    }
                }
                return obj1[key]
            },
            set(obj1, key, val, receiver){
                // 修改数据时自动触发
                console.log(obj1, name, name2);
                console.log(receiver);
                console.log('你设置了name属性');
                obj1[key] = val
                p.innerHTML = val;
                return true
            }
        })
        p.innerHTML = proxy1.name;
    </script>
</body>
</html>